<template>
    <div class="phoneVideo">
        <el-image class="video_image" :src="materialsInfo.videoUrl" alt="" fit="cover">
            <template #error>
                <el-image class="video_image" src="/static/file/mov.png" alt=""></el-image>
            </template>
        </el-image>
        <el-image class="video_play" src="/static/playnew.png" alt="" fit="cover"></el-image>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps(['materialsInfo']);
</script>
<style lang="scss" scoped>
.phoneVideo {
    position: relative;
    width: 88px;
    height: 76px;
    display: flex;
    align-items: center;

    .video_image {
        width: 100%;
        height: 76px;
    }

    .video_play {
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
